<template>
	<view class="userInfo-container">
		<!-- 头像区域 -->
		<view class="avatar-box">
			<image :src="userInfo.avatarUrl" class="avatar-pic"></image>
			<view class="avatar-name">{{ userInfo.nickName }}</view>
		</view>

		<!-- 面板区域 -->
		<view class="panel-box">
			<!-- 第一面板 -->
			<view class="panel-first-box">
				<view class="panel-first-item">
					<view>8</view>
					<view>收藏的店铺</view>
				</view>
				<view class="panel-first-item">
					<view>14</view>
					<view>收藏的商品</view>
				</view>
				<view class="panel-first-item">
					<view>18</view>
					<view>关注的商品</view>
				</view>
				<view class="panel-first-item">
					<view>84</view>
					<view>足迹</view>
				</view>
			</view>
			<!-- 第二面板 -->
			<view class="panel-two-box">
				<view class="panel-two-title">我的订单</view>
				<view class="panel-two-list">
					<view class="panel-two-item">
						<image src="../../static/my-icons/icon1.png" mode=""></image>
						<view class="panel-two-text">待收款</view>
					</view>
					<view class="panel-two-item">
						<image src="../../static/my-icons/icon2.png" mode=""></image>
						<view class="panel-two-text">待收货</view>
					</view>
					<view class="panel-two-item">
						<image src="../../static/my-icons/icon3.png" mode=""></image>
						<view class="panel-two-text">退款/退货</view>
					</view>
					<view class="panel-two-item">
						<image src="../../static/my-icons/icon4.png" mode=""></image>
						<view class="panel-two-text">全部订单</view>
					</view>
				</view>
			</view>
			<!-- 第三面板 -->
			<view class="panel-three-box">
				<view class="panel-three-item">
					<view>收货地址</view>
					<uni-icons type="right" size="18"></uni-icons>
				</view>
				<view class="panel-three-item">
					<view>联系客服</view>
					<uni-icons type="right" size="18"></uni-icons>
				</view>
				<view class="panel-three-item" @click="outLogin">
					<view>退出登录</view>
					<uni-icons type="right" size="18"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "my-userInfo",
		data() {
			return {

			};
		},
		methods: {
			...mapMutations('m_user', ['updateAddress', 'updateUserInfo', 'updateToken']),
			// 点击退出登录
			async outLogin() {
				const res = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗？',
				})
				if (res[1].confirm) {
					// 点击确定 → 清空数据
					this.updateUserInfo({})
					this.updateToken('')
					uni.removeStorage({
						key: 'token_key'
					})
					this.updateAddress({})
				}
			},
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		}
	}
</script>

<style lang="scss">
	// 图片区域
	.userInfo-container {
		height: 100%;
		// 为整个组件的结构添加浅灰色的背景
		background-color: #f4f4f4;

		.avatar-box {
			height: 400rpx;
			background-color: #c00000;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.avatar-pic {
			background-color: pink;
			display: block;
			width: 90px;
			height: 90px;
			border-radius: 50px;
			border: 2px solid white;
			box-shadow: 0 1px 5px black;
		}

		.avatar-name {
			color: white;
			font-weight: bold;
			font-size: 16px;
			margin-top: 10px;
		}
	}

	// 面板区域
	.panel-box {
		padding: 0 10px;
		position: relative;
		top: -10px;

		// 第一面板
		.panel-first-box {
			border-radius: 4px;
			display: flex;
			justify-content: space-around;
			background-color: #fff;

			.panel-first-item {
				text-align: center;
				font-size: 13px;
				padding: 10px 0;
			}
		}

		// 第二面板
		.panel-two-box {
			margin: 8px 0;
			background-color: white;
			border-radius: 4px;

			.panel-two-title {
				line-height: 45px;
				padding-left: 10px;
				font-size: 15px;
				border-bottom: 1px solid #f4f4f4;
			}

			.panel-two-list {
				display: flex;
				justify-content: space-around;
				padding: 10px 0;

				.panel-two-item {
					text-align: center;

					image {
						width: 35px;
						height: 35px;
					}

					.panel-two-text {
						font-size: 13px;
					}
				}
			}
		}

		// 第三面板
		.panel-three-box {
			margin-top: 8px;
			background-color: #fff;
			border-radius: 4px;

			.panel-three-item {
				display: flex;
				justify-content: space-between;
				padding: 10px;
				font-size: 15px;
				border-bottom: 1px solid #f4f4f4;
			}
		}
	}
</style>